<template>
	<!-- 任务管理 -->
	<div class="task">
		<div class = "tabTitle">
			<span>任务管理</span>
		</div>
		<div class="search">
			<div class = "searchLeft">
				<div style="display:inline-block;margin-top:20px;">
					<span>标题：</span>
					<el-input v-model = "queryParam.title" placeholder = "请输入内容" style = "width:154px;margin-right:20px"></el-input>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<span>任务类型：</span>
					<el-select v-model = "queryParam.type" placeholder = "全部" style = "width:154px;margin-right:20px;height:36px">
						<el-option :label = "'全部'" :value = "''"></el-option>
						<el-option v-for = "(item, index) in typeOPtions" :key = "index" :label = "item.itemName" :value = "item.itemValue"></el-option>
					</el-select>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<div style="display: inline-block;margin-right:12px" v-if="role === 'manage'">
						<span class = "demonstration">发布时间：</span>
						<el-date-picker
							placeholder = "开始日期"
							style = "width:160px;margin-right:12px"
							v-model = "queryParam.startLocalDate" 
							:clearable = "false"
							value-format="yyyy-MM-dd"
							:picker-options="startPickerOptions"
						></el-date-picker>至
						<el-date-picker
							placeholder = "结束日期"
							style = "width:160px;margin-left:12px"
							v-model = "queryParam.endLocalDate"
							:clearable = "false"
							value-format="yyyy-MM-dd"
							:picker-options="endPickerOptions"
						></el-date-picker>
					</div>
				</div>
				<div style="display:inline-block;margin-top:20px;">
					<span v-if="role === 'upload'">状态：</span>
					<el-select v-model = "queryParam.status" placeholder = "全部" v-if = "role === 'upload'" style = "width:154px;margin-right:20px">
						<el-option v-for = "item in statusOptions" :key = "item.value" :label = "item.label" :value = "item.value"></el-option>
					</el-select>
				</div>
				<el-button type = "primary" style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:20px;" @click = "query" >查询</el-button>
				<el-button style = "width:52px;margin-left: 20px;padding:0px;height:36px;margin-top:20px;" @click = "resetQueryParam">重置</el-button>
				
			</div>
			<div v-if="role === 'manage'" style="display:inline-block;margin-top:20px;">
				<el-button type="primary" icon="el-icon-plus" style = "width:80px;margin-left: 12px;padding:0px;height:36px"  @click="taskCreate" v-if="this.permissionBycode.includes(this.code + '_manage-cj')" >创建</el-button>
				<!-- <el-button type="warning" style = "width:80px;margin-left: 12px;padding:0px;height:36px"  @click="urgAll" v-if = "permissionBycode.includes(this.code + '_manage-cb')">一键催办</el-button> -->
				<UrgingAll @urgall = "urgAll" v-if = "role === 'manage' && permissionBycode.includes(this.code + '_manage-cb')"/>
			</div>
		</div>
		<div class="table_data">
			<tableComponent ref = "tableComponent" :tableData = "tableData" :tableLabel = "tableLabel" :tableOption = "tableOption" @selection-change = "handleSelectChange" />
		</div>
		<div class="pagination_wrap">
			<el-pagination
				background
				@size-change = "handleSizeChange"
				@current-change = "handleCurrentChange"
				:page-sizes = "paginationPageSizes"
				layout = "total, prev, pager, next, sizes,jumper"
				:current-page.sync = "paginationParam.currentPage"
				:page-size = "paginationParam.pageSize"
				:total = "paginationParam.total"
				style = "font-weight:400;"
			></el-pagination>
		</div>
	</div>
</template>
<script>
	import Urging from "../../../../components/Popup/Urging.vue";
	let _that
	export default {
		components: {
			Urging,
			tableComponent : () => import('../../comonComponent/table'),
			UrgingAll : () => import('../../../../components/Popup/UrgingAll.vue'),
		},
		data() {
			return {
				// new
				code:'jdjb-zxjd-rwgl',
				queryParam: {
					title: '', // 标题
					type:'', // 会议类型 
					startLocalDate: "", //发布时间开始时间
					endLocalDate: "", // 发布时间结束时间
					status: '', // 状态
				},
				typeOPtions: [], //任务类型配置
				statusOptions:[ // 任务状态配置
					{ value: '', label: '全部'},
					{ value: '0', label: '待汇报'},
					{ value: '1', label: '已完成'}
				],
				// 分页配置参数
				paginationPageSizes: [10, 30, 50],
				paginationParam: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				//old
				//表格数据
				tableData: [],
				tableLabelInit: [
					{ type : 'selection', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ type : 'index',label : '序号', width : '60', minWidth: '50', fixed : false, render : false, align : 'center'},
					{ prop : 'title', label : '标题', minWidth: '460', fixed : false, render : false, align : 'center'},
					{ prop : 'type', label : '任务类型', minWidth: '220', fixed : false, render : false, align : 'center',
						render : (h, params, data) => {
							let array = this.typeOPtions.find(item => item.itemValue == params.row.type)
							return h( 'span', {}, array ? array.itemName : '')
						}
					},
					{ prop : 'remainingDays', label : '剩余天数', minWidth: '120 ', fixed : false, render : false, align : 'center', 
						render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + (Number(params.row.remainingDays) <= 5 ? 'red' : '') }}, params.row.remainingDays)
						}
					},
					{ prop : 'completion', label : '完成进度' , minWidth: '150', fixed : false, render : false, align : 'center',
						render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + ((Number(params.row.completed) / Number(params.row.total)) < 1 ? 'red' : '') }}, params.row.completed.toString() + '/' + params.row.total.toString())
						}
					},
					{ prop : 'createdTime', label : '发布时间', minWidth: '220', fixed : false, render : false, align : 'center'},
					{ prop : 'status', label : '状态', minWidth: '220', fixed : false, render : false, align : 'center',
						render : (h, params, data) => { 
							return h( 'span', { attrs : { style: 'color :' + (params.row.status === '0' ? 'red' : '') }}, (params.row.status === '0' ? '待汇报' : params.row.status === '1' ? '已完成' : ''))
						}
					},
					{ prop : 'action', label : '操作', minWidth: '250', fixed : false, option: [],align : 'center',
						render : (h, params, data) => { 
							return h( 'span', {}, [ 
								h( "el-button", { class:'', props:{ size: 'mini' }, on : {
									click : () => {
										this.preview(params)
									}
								} }, '查看' ), 
								h( "el-button", { class:'', props:{ type: 'primary', size: 'mini' }, on : {
									click : () => {
										this.report(params)
									}
								} }, '汇报'),
								h( "el-button", { class:'', props:{ type: 'warning', size: 'mini' }, on : {
									click : () => {
										this.urg(params)
									}
								} }, '催办')
							])
						} 
					}
				],
				tableOption : {
					loading: true,
					stripe: false,
					highlightCurrentRow : false,
					border : true,
					height : 610,
					maxHeight : '',
					resizable: false,
					headerCellStyle: {lineHeight: '46px', background: '#FAFAFA', padding: 0 },
					cellStyle: {height: '50px', padding: 0 }
				},
				tableSelection: [],
				startPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.endLocalDate ? (time.getTime() > new Date(_that.queryParam.endLocalDate).getTime()) : ''
					}
				},
				endPickerOptions: {
					disabledDate(time) {
						return _that.queryParam.startLocalDate ? (time.getTime() < new Date(_that.queryParam.startLocalDate).getTime()) : ''
					}
				}
			}
		},
		computed: {
			permissionBycode(){
				return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
			},
			role() {
				if (this.permissionBycode.includes(this.code + '_manage')) {
					return 'manage'
				} else if (this.permissionBycode.includes(this.code + '_upload')) {
					return 'upload'
				} else {
					return ''
				}
			},
			tableLabel() {
				let labelOption = this.tableLabelInit.slice(0)
				if (this.role === 'upload') {
					labelOption[labelOption.length - 1].render = (h, params, data) => { 
						return h( 'span', {}, [ 
							h( "el-button", {style: {display: this.permissionBycode.includes(this.code + '_upload-xq') ? '' : 'none'}, class:'', props:{ size: 'mini' }, on : {
								click : () => {
									this.preview(params)
								}
							} }, '查看' ),
							h( "el-button", {style: {display: params.row.status === '0' && this.permissionBycode.includes(this.code + '_upload-hb') ? 'inline-block' : 'none'}, class:'', props:{ type: 'primary', size: 'mini' }, on : {
								click : () => {
									this.$router.push({path: "/index/SuperviseAndReport/Task/CreatReport", query:{id:params.row.id}});//创建任务
								}
							} }, '汇报')
						])
					}
					if (!this.permissionBycode.includes(this.code + '_upload-xq') && !this.permissionBycode.includes(this.code + '_upload-hb')) {
						labelOption.splice(labelOption.length-1 , 1)
					}
					labelOption.splice(0, 1)
					labelOption.splice(4, 2)
					
				} else if (this.role === 'manage') {
					labelOption[labelOption.length - 1].render = (h, params, data) => { 
						return h( 'span', {}, [ 
							h( "el-button", {style: {display:this.permissionBycode.includes(this.code + '_manage-xq') ? '' : 'none'}, class:'', attrs : {style: 'margin-right: 20px'}, props:{ size: 'mini'}, on : {
								click : () => {
									this.preview(params)
								}
							} }, '查看' ),
							h( "Urging", {style: {display:((Number(params.row.completed) / Number(params.row.total)) < 1) && this.permissionBycode.includes(this.code + '_manage-cb') ? 'inline-block' : 'none'}, 
							class:'',  props:{ type: 'warning', size: 'mini', clearOne: this.urg ,id: params.row.id}, on : {
								click : () => {
									this.urg(params)
								}
							} }, '催办')
						])
					}
					if (!this.permissionBycode.includes(this.code + '_manage-xq') && !this.permissionBycode.includes(this.code + '_manage-cb')) {
						labelOption.splice(labelOption.length-1 , 1)
					}
					labelOption.splice(7, 1)
				}
				return labelOption
			}
		},
		mounted() {
			// 初始化列表数据获取
			_that = this
			this.queryData()
			this.dictList('TASK_TYPE')
		},
		methods: {
			dictList(typeCode, pItemValue) {
				this.Api.Fenlei({typeCode:typeCode, pItemValue : pItemValue}).then(res =>{
					if(res && res.code === '0') {
						this.typeOPtions = res.data
					} else {
						this.typeOPtions = []
						this.$message.warning(res.message)
					}
					
				})
			},

			// 任务管理的数据列表数据获取
			queryData () {
				this.tableOption.loading = true
				let data = {
					pageNum: this.paginationParam.pageNum.toString(),
					pageSize: this.paginationParam.pageSize.toString(),
					status : this.role === 'upload' ? this.queryParam.status : '',
					endLocalDate: this.role === 'manage' ? this.queryParam.endLocalDate : '',
					startLocalDate: this.role === 'manage' ? this.queryParam.startLocalDate : '',
					title :  this.queryParam.title,
					type : this.queryParam.type
				}
				let request = this.role === 'manage' ? this.Api.getSpecialTaskList(data) : this.Api.getSpecialReportList(data)
				request.then((res) => {
					if (res && res.code === "0") {
						this.tableData = res.data.records
						this.paginationParam.total = res.data.total
					} else {
						this.tableData = []
						this.paginationParam.total = 0
						this.$message.warning(res.message)
					}
					this.tableOption.loading = false
				});
			},
			// 查询点击事件
			query() {
				this.queryData()
			},
			// 分页pageSize 改变触发事件 
			handleSizeChange(val) {
				this.paginationParam.pageSize = val
				this.queryData()
			},
			// 分页currentPage 改变触发事件
			handleCurrentChange(val) {
				this.paginationParam.pageNum = val
				this.queryData()
			},
			// 搜索栏重置事件
			resetQueryParam() {
				Object.assign(this.$data.queryParam, this.$options.data().queryParam)
				this.queryData()
			},
			// 一键催办
			urgAll() {
				let urgIds = this.tableSelection.filter(item => { return Number(item.completed) / Number(item.total) < 1 }) || []
				if (urgIds.length === 0) {
					this.$message.warning('请选择正确的数据')
				} else {
					// this.$confirm('确定催办所选信息吗？', '一键催办', {
					// 	confirmButtonText: '确定',
					// 	cancelButtonText: '取消',
					// 	type: 'warning'
					// }).then(() => {
						urgIds = urgIds.map(item => {
							return {id: item.id.toString()}
						})
						this.presstask(urgIds)
					// })
				}
			},
			// 催办
			urg(id) {
				this.presstask([{id: id.toString()}])
			},
			// 催办接口调用
			presstask (data) {
				let datas ={
					ids:data
				}
				this.Api.doPresstask(datas).then((res) => {
					if (res && res.code === "0") {
						this.$message.success('催办成功')
					} else {
						this.$message.warning(res.message)
					}
				});
			},
			// 查看事件
			preview (data) {
				this.$router.push({path: "/index/SuperviseAndReport/Task/DetailContainer", query:{id:data.row.id, role: this.role, comeFrom: this.role === 'manage'? 'TaskTable' : 'ReportTable'}})
			},
			// 创建事件
			taskCreate () {
				this.$router.push("/index/SuperviseAndReport/Task/CreatTask")//创建任务
			},
			handleSelectChange (selection) {
				this.tableSelection = selection.slice(0)
			}
		}
	};
</script>
<style lang="less" scoped>
	.task {
		width: 100%;
		padding:20px 20px 10px 20px;
		margin-bottom: 20px;
		background: #fff; 
		.tabTitle {
			line-height: 28px;
			font-size: 20px;
			color: #333333;
			font-weight: 600;
			user-select:none;
		}
		.search {
			margin: 20px 0;
			width:100%;
			display: flex;
			/deep/ .el-input__inner {
			height: 36px;
			}
			/deep/.el-icon-date
			{
			line-height: 36px;
			position: absolute;
				left: 120px;
			}
			/deep/.el-icon-arrow-up{
			line-height: 36px;
			}
			.searchLeft {
				flex: 1;
			}
		}
		.table_data {
			flex: 1;
		}
		.pagination_wrap {
			display: flex;
			justify-content: flex-end;
			bottom: 0;
			right: 0;
			/deep/ .el-pagination {
			margin-top: 0;
			padding-top:20px;
			padding-bottom:20px;
			line-height: normal;
			}
		}
	}
</style>

